<template>
  <div>
    <!-- 文本回答 -->
    <div v-show="answer" :class="
      showMore && showDescAnswer ? '' : 'c-maxh150 c-text-hidden maxMask'">
      <div class="c-p c-lh42 c-pl10" :id="'textAnswer'+answerIndex" ref="textAnswer" >
        <div class="c-ww-bw c-lh42" v-for="(cItem,cIndex) in answer.split('\n')" :key="cIndex">{{ cItem }}</div>
      </div>
    </div>
    <div class="c-flex-row c-justify-end c-w100" v-if="answer">
      <div @click.stop="clickShowMore" v-if="showDescAnswer" class="theme-fc c-fs20">{{showMore ? '收起':'展开'}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "answer",
  props: {
    answerIndex: {
      type: Number,
      default: 0
    },
    answer: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      showDescAnswer:false,
      showMore:false
    };
  },
  watch: {
  },
  mounted() {
    let that = this
        this.$nextTick(() => {
              //获取当前内容的行高，超过3行则显示更多
          let queryTextContent = document.querySelectorAll("#textAnswer" + this.answerIndex)[0];
          if (!queryTextContent) {
            return;
          }
          console.log(that.$refs.textAnswer.offsetHeight)
          if (!!that.$refs.textAnswer && that.$refs.textAnswer.offsetHeight <= 89) {
            that.showDescAnswer = false
          } else {
            that.showDescAnswer = true
          }
      })
  },
  methods: {
    clickShowMore() {
      this.showMore = !this.showMore
    },
  },
  destroyed() {
  }
};
</script>

<style scoped>
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.isRight{
  color: #71DB77;
}
.isRightBg{
  background: rgba(113,219,119,0);
}
.isWrong{
  color: #FB806D;
}
.isWrongBg{
  background: rgba(251,128,109,0);
}
.maxMask {
  mask-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.7) 10%,
    rgba(255, 255, 255, 1) 15%,
    rgba(255, 255, 255, 1) 100%
  );
}
</style>
